@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    /* 全局过渡动画 */
    html, body, .container, .card, .btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 亮色模式基础样式 */
    :root {
        --bg-color: #fafafa;
        --text-color: #2d3748;
        --card-bg: #ffffff;
        --btn-bg: #ffffff;
        --btn-text: #2d3748;
        --btn-border: #edf2f7;
    }

    /* 暗色模式样式 */
    .dark {
        --bg-color: #1a202c;
        --text-color: #D1D7E0;
        --card-bg: #2d3748;
        --btn-bg: #2d3748;
        --btn-text: #D1D7E0;
        --btn-border: #4a5568;
    }

    /* 应用全局样式 */
    body {
        background: var(--bg-color);
        color: var(--text-color);
    }

    .card {
        background: var(--card-bg);
    }

    .btn {
        background: var(--btn-bg);
        color: var(--btn-text);
        border: 1px solid var(--btn-border);
    }
}

/* 全局基础样式 */
body {
    @apply bg-light-bg dark:bg-dark-bg text-light-text dark:text-dark-text;
}

.el-drawer {
    height: auto !important;
    background-color: #dbdbdb !important;
    border-radius: 0 0 50px 50px !important;
}